<template>
  <div id="userPageDiv">
    <el-container>

      <el-header>
        <div>
<!--          <div style="float: left;">-->
<!--            <el-avatar icon="el-icon-user-solid"></el-avatar>-->
<!--          </div>-->
          <div style="float:left;">
            <p>{{userInfo.userName}}</p>
            <p>{{userInfo.mailbox}}</p>
          </div>
        </div>
        <el-popover
          placement="right"
          width="400"
          trigger="click">
          <el-form ref="form" :model="uploadForm" label-width="80px">
            <el-form-item label="视频标题">
              <el-input v-model="uploadForm.title"></el-input>
            </el-form-item>
            <el-form-item label="简介">
              <el-input type="textarea" v-model="uploadForm.description"></el-input>
            </el-form-item>
            <el-form-item label="视频类型">
              <el-radio-group v-model="uploadForm.tag">
                <el-radio v-for="tag in common.videoTag" :key="tag" :label="tag">{{common.videoTagMap.get(tag)}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="视频文件">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="http://172.29.3.28:8888/api/video/upload"
                :limit="1"
                :data="uploadForm"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-error="handleError"
                :on-success="handleSuccess"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip"></div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即投稿</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
          <el-button slot="reference">视频投稿</el-button>
        </el-popover>
      </el-header>


      <el-main>
        <el-menu router class="el-menu-demo" mode="horizontal" background-color="#FFC0CB" text-color="#fff"
          active-text-color="#1E90ff">
          <el-menu-item index="favorites">收藏夹</el-menu-item>
          <el-menu-item index="contribution">投稿</el-menu-item>
          <el-menu-item index="dynamic">动态</el-menu-item>
        </el-menu>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import common from "./common"
  export default {
    data() {
      return {
        userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
        uploadForm: {
          title: '',
          description: '',
          tag: -1
        },
        common: common,
        rules: {
          title: [
            {required: true, message: "请输入视频标题", trigger: "blur"}
          ],
          description: [

          ]
        }
      }
    },

    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      onSubmit: function (event) {
        this.$refs.upload.submit()
      },
      handleError: function(err, file, fileList) {

      },
      handleSuccess: function (response, file, fileList) {
        this.$alert('您的作品正在被审核。', '投稿成功', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `视频审核中，请耐心等待`
            });
          }
        });
      }
    },
    created() {
      this.uploadForm.uid = this.userInfo.uid
    },
    mounted() {
      window.vue=this
    }
  }
</script>

<style>
  #userImg {
    float: left;
    max-height: 20%;
    max-width: 20%;
  }

  #userPageDiv {
    width: 50%;
    height: 100%;
    margin-left: 25%;
    margin-right: 25%;
    background-color: #FFC0CB
  }

  .el-header {
  }
</style>
